<template>
  <div id="app">
    <keep-alive exclude="Blog">
      <router-view/>
    </keep-alive>
    <aplayer :audio="audio" :lrcType="1" fixed/>
  </div>
</template>


<script>
import {mapState,mapActions,mapGetters} from 'vuex'
export default{
  provide(){
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      texTitle: "JJY_BLOG",
      isRouterAlive:true,
      viewCount:0, //访问量
      showPage: '',//判断用户工具
      audio: [
        {
          name: "我的快乐时代",
          artist: "陈奕迅",
          url:
              "http://www.pghhh.top/firstpicture/wdklsd.mp3",
          cover: 'http://r.photo.store.qq.com/psc?/V518IhTc1ak1tt3yl2dJ2vkXwd4UwPld/45NBuzDIW489QBoVep5mceFnspUQEJ3HI2k1qsHt1ZgLIRnZsRZOS6r6W0.ioz6*.8wmm.Vum1wZ3S3OxoC3ycG33qVtZXpK08q8yHYNG3k!/r', // prettier-ignore
          lrc:"",
        },
        {
          name: "我杯茶",
          artist: "陈奕迅",
          url:
              "http://www.pghhh.top/firstpicture/wbc.mp3",
          cover: 'http://r.photo.store.qq.com/psc?/V518IhTc1ak1tt3yl2dJ2vkXwd4UwPld/45NBuzDIW489QBoVep5mceFnspUQEJ3HI2k1qsHt1ZgLIRnZsRZOS6r6W0.ioz6*.8wmm.Vum1wZ3S3OxoC3ycG33qVtZXpK08q8yHYNG3k!/r', // prettier-ignore
          lrc:"",
        },
        {
          name: "以父之名",
          artist: "周杰伦",
          url:
              "http://www.pghhh.top/firstpicture/yfzm.mp3",
          cover: 'http://r.photo.store.qq.com/psc?/V518IhTc1ak1tt3yl2dJ2vkXwd4UwPld/45NBuzDIW489QBoVep5mcWM3xF68Z4J7ok7rWdHoz8CRaLzGIv9gJStT8oHObRTtTNyVRyYg0R8KG76QTVePh9NLrpe5z59sPZeEE3RVY2E!/r', // prettier-ignore
          lrc:""
        },
        {
          name: "黄金时代",
          artist: "陈奕迅",
          url:
              "http://www.pghhh.top/firstpicture/hjsd.mp3",
          cover: 'http://r.photo.store.qq.com/psc?/V518IhTc1ak1tt3yl2dJ2vkXwd4UwPld/45NBuzDIW489QBoVep5mceFnspUQEJ3HI2k1qsHt1ZgLIRnZsRZOS6r6W0.ioz6*.8wmm.Vum1wZ3S3OxoC3ycG33qVtZXpK08q8yHYNG3k!/r', // prettier-ignore
          lrc: "",
        },
        {
          name: "明日旅程",
          artist: "Pandora樂隊",
          url:
              "http://www.pghhh.top/firstpicture/mrlc.mp3",
          cover: 'http://r.photo.store.qq.com/psc?/V518IhTc1ak1tt3yl2dJ2vkXwd4UwPld/45NBuzDIW489QBoVep5mcTpfcZF*85m9dFZQdm1B*PVAhbdHAbGp461Yki*VpY3SDboON7qS3sBAFM7uii7NihScdTEMd7Jrij3cZ6gVPGI!/r', // prettier-ignore
          lrc: "",
        },
        {
          name: "玛利奥派对",
          artist: "陈奕迅",
          url:
              "http://www.pghhh.top/firstpicture/mlapd.mp3",
          cover: 'http://r.photo.store.qq.com/psc?/V518IhTc1ak1tt3yl2dJ2vkXwd4UwPld/45NBuzDIW489QBoVep5mceFnspUQEJ3HI2k1qsHt1ZgLIRnZsRZOS6r6W0.ioz6*.8wmm.Vum1wZ3S3OxoC3ycG33qVtZXpK08q8yHYNG3k!/r', // prettier-ignore
          lrc: "",
        },
      ],
    }
  },
  created(){
    // document.title = this.texTitle;
    // if (this._isMobile()) {
    //   this.showPage = 1
    // } else {
    //   this.showPage = 2
    // }
    // console.log(this.showPage)
  },

  mounted(){

    //初次加载显示loading
    document.getElementById('app').style.display = 'block';
    document.getElementById('appLoading').style.display = 'none';

    this.getviewCount()

    // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是 hashchange事件
    window.addEventListener('hashchange', () => {
      let currentPath = window.location.hash.slice(1)
      if (this.$route.path !== currentPath) {
        this.$router.push(currentPath)
      }
    }, false)


    // 如果支持 popstate （一般移动端都支持）
    if (window.history && window.history.pushState) {
      // 往历史记录里面添加一条新的当前页面的url
      history.pushState(null, null, document.URL);
      // 给 popstate 绑定一个方法监听页面刷新
      window.addEventListener('popstate', this.backNative, false); //false阻止默认事件
    }
  },

  // watch:{
  //   $route:{
  //     handler: function(to,from){
  //       console.log("---------------------")
  //       console.log("to:")
  //       console.log(to.path)
  //       console.log("from:")
  //       console.log(from.path)
  //       if(to.path !== from.path){
  //         // history.pushState(null,null,document.URL)
  //         // console.log("change")
  //         // console.log(window.history.length)
  //
  //         // window.location.href = location.href + '#' + to.path
  //
  //         console.log(window.location.href + '#' + to.path)
  //         // this.$router.push()
  //         console.log("我执行了")
  //         console.log(location.href)
  //       }
  //       console.log("---------------------")
  //     },
  //     deep: true
  //   }
  // },

  methods: {

    backNative(){
        // console.log("监听到了");
        if(this.$store.getters.getSource == "type"){
          this.$router.push("/type")
        }else if(this.$store.getters.getSource == "tag"){
          this.$router.push("/tag")
        }else if(this.$store.getters.getSource == "blog"){
          this.$router.push("/")
        }

        // this.$router.go(-1)
        // this.$router.back()
        // window.history.go(-1)
        // window.history.back()
    },

    //获取访问量
    getviewCount(){
      var _this = this
      this.axios.get('/blog/getViewCount').then(resp=>{
        // console.log(resp)
        // _this.blogCount = resp.data.obj.blogCount
        _this.viewCount = resp.data
        this.changeviewCountFun(resp.data)
      }).catch((error) => { //捕获异常
        // console.log(error)
      })
    },

    //给store中访问量viewCount的赋值
    changeviewCountFun(viewCount){
      this.$store.dispatch("changeviewCountFun",viewCount)
    },

    reload(){
      this.isRouterAlive = false
      this.$nextTick(function(){
        this.isRouterAlive = true
      })
    }
  },

  //销毁钩子
  destroyed() {
    window.removeEventListener('popstate', this.backNative, false); //false阻止默认事件
  },
}
</script>

<style>
#app{
  background:url(../src/assets/image/movebg.jpg) no-repeat  0px 0px;
  background-size:cover;

}
* {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
  /* font-size: 20px; */
  /* font-style: italic;  */
}

.el-loading-spinner .el-loading-text{
  font-size: 60px !important;
}

</style>
